<template>
    <div>
        <!-- {{cate}} -->
        <!-- 面包屑导航 -->
        <BreadView>
            <BreadItem :to="'/'">首页</BreadItem>
            <BreadItem :to="`/Cate?id=${breadObj.oneCateId}`">{{ breadObj.oneCateName }}</BreadItem>
            <BreadItem>{{ breadObj.twoCateName }}</BreadItem>
        </BreadView>
        <!-- 属性筛选展示 -->
        <div class="sub-filter">
            <div class="item">
                <div class="head">品牌：</div>
                <div class="body">
                    <a href="javascript:;" :class="{ active: brandAttrs }">全部</a>
                    <a href="javascript:;" v-for="item in brandAttrs" :key="item.id">{{ item.name }}</a>
                </div>
            </div>
            <div class="item" v-for="item in attrList" :key="item.id">
                <div class="head">{{ item.name }}:</div>
                <div class="body">
                    <a href="javascript:;" :class="{ active: brandAttrs }">全部</a>
                    <a href="javascript:;" v-for="it in item.properties" :key="it.id">{{ it.name }}</a>
                </div>
            </div>
        </div>
        <!-- 商品展示区 -->
        <SubGoods></SubGoods>
    </div>
</template>

<script>
import BreadView from '@/components/bread/BreadView.vue'
import BreadItem from '@/components/bread/BreadItem.vue'
import { getSubApi } from '@/utils/api/categoryapi'
import SubGoods from '@/components/subCate/SubGoods.vue'
export default {
    components: { BreadView, BreadItem, SubGoods},
    data() {
        return {
            breadObj: {
                oneCateName: null,
                twoCateName: null,
                oneCateId: null,
            },
            brandAttrs: [],//品牌
            attrList: [],//规格
        }
    },
    mounted() {
        this.getAttrList(this.$route.query.id);
    },
    methods: {
        // 面包屑方法
        setBread() {
            for (var i = 0; i <= this.cate.length - 1; i++) {
                var index = this.cate[i].children.findIndex((item) => {
                    // console.log(this.cate[i]);
                    return item.id == this.$route.query.id;
                });
                if (index != -1) {
                    //   console.log(i, index);
                    // var obj = {}
                    this.breadObj.twoCateName = this.cate[i].children[index].name
                    this.breadObj.oneCateName = this.cate[i].name
                    this.breadObj.oneCateId = this.cate[i].id
                    break;
                }
            }
        },
        async getAttrList(id) {
            /* 属性筛选展示 */
            let arr = await getSubApi(id)
            // console.log(arr);
            this.brandAttrs = arr.result.brands;
            // console.log(this.brandAttrs);
            this.attrList = arr.result.saleProperties;
        }
    },
    watch: {
        '$route': {
            handler(val) {
                if (val) {
                    this.setBread()
                    this.getAttrList(this.$route.query.id)
                }
            },
            deep: true,
            immediate: true
        }
    },
    computed: {
        cate() {
            return this.$store.state.category.cateList;
        }
    },
}
</script>

<style lang="scss">
@import '@/assets/css/variables.scss';

// 筛选区
.sub-filter {
    background: #fff;
    padding: 25px;

    .item {
        display: flex;
        line-height: 40px;

        .head {
            width: 80px;
            color: #999;
        }

        .body {
            flex: 1;

            a {
                margin-right: 36px;
                transition: all .3s;
                display: inline-block;

                &.active,
                &:hover {
                    color: $xtxColor;
                }
            }
        }
    }
}

.active {
    color: $xtxColor;
}
</style>